<script setup lang="ts">
import { ref, computed } from 'vue'

const props = defineProps<{
  disabled?: boolean
}>()

const showPopover = ref(false)

enum ActionCodeEnum {
  viewPrescription = 'viewPrescription',
  delOrder = 'delOrder'
}

const actions = computed(() => [
  {
    code: ActionCodeEnum.viewPrescription,
    text: '查看处方',
    disabled: props.disabled
  },
  { code: ActionCodeEnum.delOrder, text: '删除订单' }
])

const emit = defineEmits<{
  (e: 'on-preview'): void
  (e: 'on-delete'): void
}>()

const onSelect = (action: { code: ActionCodeEnum }) => {
  if (action.code === ActionCodeEnum.viewPrescription) emit('on-preview')
  if (action.code === ActionCodeEnum.delOrder) emit('on-delete')
}
</script>

<template>
  <div class="consult-more">
    <van-popover
      v-model:show="showPopover"
      placement="top-start"
      :actions="actions"
      @select="onSelect"
    >
      <template #reference> 更多 </template>
    </van-popover>
  </div>
</template>

<style lang="scss" scoped>
.consult-more {
  color: var(--cp-tag);
  flex: 1;
  font-size: 13px;
}
</style>
